<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <!-- 搜索框 -->
          <el-input
            placeholder="请输入商品名称"
            v-model="search"
            style="width: 200px"
          >
          </el-input>
          <el-button
            style="margin-left: 5rem"
            icon="el-icon-document-add"
            type="primary"
            @click="handleAdd"
            >添加</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="handleRefresh"
            >刷新</el-button
          >
        </el-col>
      </el-row>
      <br />
      <!-- 用户列表区域 -->
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search ||
              data.commodityName.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称：">
                <span>{{ props.row.commodityName }}</span>
              </el-form-item>
              <el-form-item label="所属店铺：">
                <span>显而易见官方旗舰店</span>
              </el-form-item>
              <el-form-item label="商品 ID：">
                <span>{{ props.row.commodityId }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID：">
                <span>{{ UserId }}</span>
              </el-form-item>
              <el-form-item label="商品分类：">
                <span>{{ props.row.lib.classificationName }}</span>
              </el-form-item>
              <el-form-item label="店铺地址：">
                <span>福建省/龙岩市/就爱信息科技四部有限公司</span>
              </el-form-item>
              <el-form-item label="商品描述：">
                <span>{{ props.row.commodityExplain }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <!-- <el-table-column label="图片"></el-table-column> -->
        <el-table-column label="商品 ID" prop="commodityId"> </el-table-column>
        <el-table-column label="商品名称" prop="commodityName">
        </el-table-column>
        <el-table-column label="描述" prop="commodityExplain">
        </el-table-column>
        <el-table-column prop="price" label="商品价格(元)"></el-table-column>
        <el-table-column prop="inventory" label="库存量"> </el-table-column>
        <el-table-column label="是否上架">
          <template slot-scope="scope">
            <el-switch
              @change="changeIsenable(scope.$index, scope.row)"
              v-model="scope.row.isEnable"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="showEditDialog(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="showDeleteDialog(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 15, 30, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getcommSku, deletecommSku, changeIsgr } from "../../api/commsku";
import { gteCommspu } from "../../api/comm";

export default {
  data() {
    return {
      tableData: [],
      UserId: 5,
      search: "",
      queryInfo: {
        //   查询搜索参数
        query: "",
        // 当前显示多少条默认
        pagesize: 10,
        // 当前页码值，默认第一页
        pagenum: 1,
      },

      total: 0,
    };
  },
  created() {
    // this.getGoodsList()
  },
  mounted() {
    setTimeout(() => {
      this.AllSpu();
    }, 200);
    this.getAllSku();
  },
  methods: {
    //是否上架
    changeIsenable(index, row) {
      console.log(index);
      console.log(row.isEnable);
      let obj = {
        id: row.id,
        isEnable: row.isEnable,
      };
      changeIsgr(obj)
        .then(({ data }) => {
          console.log(data);
          if (data.data.isGrounding == true) {
            this.$message({
              showClose: true,
              message: "上架成功！",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "下架成功！",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取sku
    getAllSku() {
      var uid = this.UserId;
      getcommSku(uid)
        .then(({ data }) => {
          if (data.data == "") {
            let obj = {
              commodityExplain: "",
              commodityId: "",
              commodityName: "",
              createTime: "",
              id: "",
              inventory: "",
              isEnable: false,
              price: "",
              lib: {},
            };
            this.tableData.push(obj);
          } else {
            let newArr = [];
            data.data.forEach((element) => {
              let otherobj = {
                commodityExplain: element.commodityExplain,
                commodityId: element.commodityId,
                commodityName: element.commodityName,
                createTime: element.createTime,
                isEnable: element.isEnable,
                id: element.id,
                inventory: element.inventory,
                price: element.price,
                lib: {},
              };
              newArr.push(otherobj);
            });
            this.tableData = newArr.reverse();
            console.log(newArr);
          }
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取spu以及分类
    AllSpu() {
      var spuId = this.UserId;
      gteCommspu(spuId)
        .then(({ data }) => {
          console.log(data.data);
          this.tableData.forEach((element) => {
            data.data.forEach((item) => {
              if (element.commodityId == item.id) {
                element.lib = item;
              }
            });
          });
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //   根据分页获取对应的商品列表
    // async getGoodsList () {
    //   const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
    //   console.log(res)
    //   if (res.meta.status !== 200) {
    //     return this.$message.error('获取商品信息失败')
    //   }
    //   this.goodslist = res.data.goods
    //   console.log(this.goodslist)
    //   this.total = res.data.total
    // },
    handleSizeChange() {
      // this.queryInfo.pagesize = newsize
      // this.getGoodsList()
    },
    // 监听页码值改变的事件
    handleCurrentChange() {
      // this.queryInfo.pagenum = newPage
      // this.getGoodsList()
    },
    //刷新
    handleRefresh() {
      location.reload();
    },
    //删除
    showDeleteDialog(index, row) {
      console.log(index, row);
      deletecommSku(row.id)
        .then(({ data }) => {
          console.log(data);
          this.tableData.splice(index, 1);
          this.$message({
            showClose: true,
            message: data.msg,
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(index);
    },

    //编辑
    showEditDialog(index, row) {
      console.log(index, row);
      console.log(index);
    },
    //添加
    handleAdd() {
      this.$router.push("/Store/StoreManagement/StoreCommodityAdd");
    },
  },
};
</script>
<style  scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
